<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>SQL 日志转换工具</title>
  <style>
    body {
      font-family: 'Courier New', monospace;
      padding: 20px;
      background: #f5f5f5;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    textarea {
      width: 100%;
      min-height: 120px;
      font-family: inherit;
      padding: 8px;
      margin: 10px 0;
      box-sizing: border-box;
    }
    #sqlOutput {
      background: #f8f8f8;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      white-space: pre-wrap;
      word-break: break-all;
      min-height: 80px;
      max-height: 300px;
      overflow: auto;
    }
    button {
      margin: 5px 5px 0 0;
      padding: 6px 12px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>SQL 日志转换工具</h2>
    <p>粘贴包含 <code>Preparing:</code> 和 <code>Parameters:</code> 的日志：</p>
    <textarea id="logInput" placeholder="例如：
2023-01-01 DEBUG ... 
Preparing: SELECT * FROM user WHERE id = ? AND name = ?
Parameters: 123(Integer), Alice(String)
"></textarea>
    <br>
    <button onclick="convert()">🔄 转换</button>
    <button onclick="copyResult()">📋 复制结果</button>

    <h3>转换结果：</h3>
    <div id="sqlOutput">点击“转换”查看结果</div>
  </div>

  <script>
    function convert() {
      const text = document.getElementById('logInput').value;
      let stmt = '';
      let paramsList = [];

      // 提取 Preparing 行
      const prepIndex = text.indexOf('Preparing: ');
      if (prepIndex === -1) {
        alert('❌ 未找到 "Preparing: " 行');
        return;
      }
      let endPrep = text.indexOf('\n', prepIndex);
      if (endPrep === -1) endPrep = text.length;
      stmt = text.substring(prepIndex + 'Preparing: '.length, endPrep).trim();

      // 提取 Parameters 行
      const paramIndex = text.indexOf('Parameters: ');
      if (paramIndex !== -1) {
        let endParam = text.indexOf('\n', paramIndex);
        if (endParam === -1) endParam = text.length;
        const paramStr = text.substring(paramIndex + 'Parameters: '.length, endParam);
        paramsList = paramStr.split(',').map(p => p.trim()).filter(p => p);
      }

      // 替换 ? 占位符
      for (let p of paramsList) {
        let value = p;
        let type = '';
        if (p.includes('(') && p.includes(')')) {
          const idx1 = p.indexOf('(');
          value = p.substring(0, idx1).trim();
          type = p.substring(idx1 + 1, p.indexOf(')')).trim();
        }
        if (type === 'String' || type === 'Timestamp') {
          stmt = stmt.replace('?', `'${value}'`);
        } else {
          stmt = stmt.replace('?', value);
        }
      }

      document.getElementById('sqlOutput').textContent = stmt;
    }

    function copyResult() {
      const result = document.getElementById('sqlOutput').textContent;
      if (!result || result === '点击“转换”查看结果') {
        alert('⚠️ 没有可复制的内容');
        return;
      }
      navigator.clipboard.writeText(result).then(() => {
        alert('✅ 已复制到剪贴板！');
      }).catch(err => {
        console.error('复制失败:', err);
        // 降级方案（兼容旧浏览器）
        const textarea = document.createElement('textarea');
        textarea.value = result;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        alert('✅ 已复制（兼容模式）');
      });
    }
  </script>
</body>
</html>